import { FC, useState } from 'react'
import { Resizable } from 'react-resizable'
import 'react-resizable/css/styles.css'

const ResizableView: FC = () => {
  const [state, setState] = useState({ width: 200, height: 200 })
  const onResize = (_event: any, { size }: any) => {
    setState({ width: size.width, height: size.height })
  }

  return (
    <>
      <Resizable height={state.height} width={state.width} onResize={onResize}>
        <div style={{ width: state.width + 'px', height: state.height + 'px', background: 'green' }}>
          <span>Contents</span>
        </div>
      </Resizable>
    </>
  )
}

export default ResizableView
